<template>
  <div>
    <div class="card">
      <el-card class="card-box" shadow="hover"
        >班级总人数：{{ this.nums }}
      </el-card>
      <el-card class="card-box" shadow="hover"
        >今日班级填报人数：{{ this.today_nums }}</el-card
      >
      <el-card class="card-box" shadow="hover"
        >今日班级未填报人数：{{ this.today_no_nums }}</el-card
      >
      <el-card class="card-box" shadow="hover"
        >今日班级健康人数：{{ this.today_health }}</el-card
      >
      <el-card class="card-box" shadow="hover"
        >今日班级疑似感染人数：{{ this.today_illness }}</el-card
      >
    </div>
    <div class="title">今日班级未填报学生名单</div>
    <el-table :data="tableData" style="width: 100%; margin-bottom: 20px">
      <el-table-column prop="no" label="序号" width="150"> </el-table-column>
      <el-table-column prop="count" label="学号" width="200"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="200"> </el-table-column>
      <el-table-column prop="sex" label="性别" width="200"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <div class="title">近15天班级疫情防控填报数据</div>
    <ve-line :data="chartData"></ve-line>
    <div class="title">近15天班级疫情防控健康数据</div>
    <ve-line :data="chartData1"></ve-line>
  </div>
</template>

<script>
export default {
  created: function () {
    this.getIndex();
  },
  methods: {
    getIndex() {
      this.$api({
        url: "/index/users_classnum",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data);
          this.nums = data.length;
        },
      });
      this.$api({
        url: "/index/today_classnum",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data);
          this.today_nums = data.length;
          this.today_no_nums = this.nums - data.length;
        },
      });
      this.$api({
        url: "/index/today_health_classnum",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data.length);
          this.today_health = data.length;
          this.today_illness = this.today_nums - this.today_health;
        },
      });
      this.$api({
        url: "/index/today_no",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data);
          data.forEach((value, index) => {
            var listdata = {
              no: index + 1,
              address: value.address,
              name: value.name,
              sex: value.sex,
              count: value.count,
            };
            this.tableData.push(listdata);
            listdata = "";
          });
        },
      });
      this.$api({
        url: "/index/classhealthbiao",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data);
          for (let i = 0, l = data.length; i < l; i++) {
            let json = {
              时间: i,
              健康人数: data[i],
            };
            this.chartData1.rows.push(json);
          }
          console.log(this.chartData1.rows);
        },
      });
      this.$api({
        url: "/index/classtianbaobiao",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data);
          for (let i = 0, l = data.length; i < l; i++) {
            let json = {
              时间: i,
              填报人数: data[i],
            };
            this.chartData.rows.push(json);
          }
          console.log(this.chartData.rows);
        },
      });
    },
  },
  data: function () {
    return {
      nums: "",
      today_nums: "",
      today_no_nums: "",
      today_health: "",
      today_illness: "",
      chartData: {
        columns: ["时间", "填报人数"],
        rows: [],
      },
      chartData1: {
        columns: ["时间", "健康人数"],
        rows: [],
      },
      tableData: [],
    };
  },
};
</script>

<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.card {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}
.card-box {
  width: 250px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: rgb(128, 128, 128);
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}

.title {
  width: 100%;
  text-align: left;
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  padding-left: 20px;
}
</style>
